<template>
  <div class="stuUserInfoContainer">
    <div class="container">
      <div class="title">教师个人信息</div>
      <div class="box">
        <div class="img">
          <img src="./image/image.webp">
        </div>
        <div class="detail">
          <div class="leftBox">
            <div class="conBox">
              <span class="left">工号：</span>
              <span class="right">{{ detail.id }}</span>
            </div>
            <div class="conBox">
              <span class="left">姓名：</span>
              <span class="right">{{ detail.name }}</span>
            </div>
            <div class="conBox">
              <span class="left">学院：</span>
              <span class="right">{{ detail.department }}</span>
            </div>
          </div>
          <div class="rightBox">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api/user"

export default {
  name: "index",
  data() {
    return {
      detail: {}
    }
  },
  methods: {
    async getData() {
      const res = await getInfo()
      if (res.success == true) {
        this.detail = res.data
      } else {
        this.$message.error(res.errorMsg)
      }
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="sass">
.stuUserInfoContainer
  padding: 20px
  .container
    border: 1px solid #eeeeee
    border-radius: 30px
    width: 100%
    height: 500px
    .title
      background-color: #f5f5f5
      padding-left: 20px
      height: 60px
      border-radius: 30px 30px 0 0
      line-height: 60px
      font-size: 20px
      font-weight: 600
      color: #04172F
    .box
      padding: 30px
      position: relative
      .img
        width: 150px
        height: 200px
        position: absolute
        right: 100px
        top: 30px
        img
          height: 100%
          width: 100%
      .detail
        font-size: 18px
        display: flex
        .leftBox
          width: 500px
          .conBox
            width: 100%
            height: 50px
            line-height: 50px
            .right
              margin-left: 10px
        .rightBox
          width: 500px
          .conBox
            width: 100%
            height: 50px
            line-height: 50px
            .right
              margin-left: 10px
</style>
